<template>
  <XnDialog title="人员选择" :visible.sync="selfVisible" width="70%" @closed="handleClose">
    <div class="tips">
      <el-alert
        title="因考核指标等存在差异，请选择同类型人员进行对比。如：科员——科员。"
        type="warning"
        :closable="false"></el-alert>
    </div>
    <div class="sys_emp_detail">
      <div class="selcet_result">
        <div class="tag_box">
          <el-tag
            :key="tag.id"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleTagClose(tag)"
            size="medium">
            {{ tag.name }}
          </el-tag>
        </div>
        <div class="input">
          <el-input
            type="text"
            placeholder="输入人员姓名搜索"
            v-model="search"
            @input="searchFn"
            prefix-icon="el-icon-search"
            size="mini"></el-input>
        </div>
      </div>
      <div class="container_wrap">
        <div class="right_box">
          <div class="step_box" v-for="(item, idx) in data" :key="idx">
            <div @click="handleClick(idx)" :class="[idx == index ? 'current-text' : '', 'text']">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="left_box" ref="itemList">
          <div class="content_big_right" @scroll="handleScroll" ref="rigth">
            <!-- 基本信息 -->
            <ul class="wrap">
              <li class="item1" v-for="(item, indey) in data" :key="indey">
                <div class="serve">
                  <div class="title2">{{ item.name }}</div>
                  <ul class="serve-wrap">
                    <li
                      v-for="(li, indez) in item.userList"
                      :key="indez"
                      @click="handleCheckboxChange(li)"
                      :class="['serve-item', dynamicTagsID.indexOf(li.id) > -1 ? 'active' : '']">
                      <div class="head-icon">
                        <el-avatar
                          slot="reference"
                          class="user-icon"
                          :src="li.headUrl"
                          size="large"
                          v-if="li && li.headUrl"></el-avatar>
                        <el-avatar
                          slot="reference"
                          class="user-icon"
                          :src="li.gender === '女' ? circleUrlW : circleUrlM"
                          size="large"
                          v-else></el-avatar>
                      </div>
                      <div class="name">{{ li.name }}</div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="mini">取 消</el-button>
      <el-button type="primary" @click="commit" size="mini">确 定</el-button>
    </span>
  </XnDialog>
</template>

<script>
import XnDialog from '@com/xnDialog.vue'
import { getCompareOrganUserList } from '@apis/api-intelligent.js'
import { cloneDeep } from 'lodash'
export default {
  name: 'PersonnelSelect',
  components: { XnDialog },
  props: {
    showStatus: {
      type: Boolean,
      default: false,
    },
    idArr: {
      type: Array,
      default: () => [],
    },
    dataObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      scrollY: 0, // 左侧列表滑动的y轴坐标
      index: 0,
      response: [],
      data: [],
      scorllEvent: false,
      dynamicTags: [],
      dynamicTagsID: [],
      search: '',
      selfVisible: false,
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  created() {
    // this.pageInit()
  },
  mounted() {
    // 启动鼠标滚动监听
    window.addEventListener('mousewheel', this.setScorllEvent, true) ||
      window.addEventListener('DOMMouseScroll', this.setScorllEvent, false)
  },
  watch: {
    scrollY() {
      this.initRightBoxHeight()
    },
    showStatus(bool) {
      this.selfVisible = bool
      if (bool) {
        if (this.response.length && this.data.length) {
          this.init()
        } else {
          this.pageInit()
        }
      }
    },
  },
  methods: {
    pageInit() {
      getCompareOrganUserList({
        optionId: localStorage.pskh_userId,
        year: this.dataObj.year,
        quarter: this.dataObj.quarter,
      }).then(res => {
        if (res.data && res.data.length > 0) {
          const data = cloneDeep(res.data)
          data.forEach(item => {
            item.userList.forEach(li => {
              li.organId = item.id
            })
          })
          this.response = data
          this.data = data
          this.init()
        }
      })
    },
    handleClose() {
      this.selfVisible = false
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    searchFn() {
      if (this.search === '') {
        this.data = this.response
        return
      }
      const newArr = []
      const dataArr = JSON.parse(JSON.stringify(this.response))
      dataArr.forEach((value, index) => {
        const arr = value
        arr.userList = value.userList.filter(item => item.name.indexOf(this.search) > -1)
        if (arr.userList.length > 0) {
          newArr.push(arr)
        }
      })

      this.data = newArr
    },
    init() {
      this.dynamicTags = []
      this.dynamicTagsID = []
      if (this.idArr.length === 0) return
      const dataArr = JSON.parse(JSON.stringify(this.response))
      this.idArr.forEach(li => {
        dataArr.forEach((value, index) => {
          value.userList.forEach(item => {
            if (item.id === li) {
              this.dynamicTags.push(item)
            }
          })
        })
      })
      this.dynamicTagsID = JSON.parse(JSON.stringify(this.idArr))
    },
    commit() {
      if (this.dynamicTagsID.length !== 2) {
        this.$message({
          message: '只能选择两个人员进行对比。',
          type: 'warning',
        })
        return
      }
      // this.$emit('commit', this.dynamicTagsID)
      this.$emit('commit', this.dynamicTags)
    },
    setScorllEvent() {
      this.scorllEvent = true
    },

    handleScroll(event) {
      this.scrollY = event.target.scrollTop
    },
    handleClick(idx) {
      this.index = idx
      // 点击事件标识非滚动事件
      this.scorllEvent = false
      this.initRightBoxHeight()
      this.$refs.rigth.scrollTop = this.rightLiTops[idx]
    },
    /* 计算每个小盒子高度 */
    initRightBoxHeight() {
      const itemArray = []
      let top = 0
      itemArray.push(top)
      // 获取右边所有子盒子高度集合
      const allList = this.$refs.itemList.getElementsByClassName('item1')
      // allList伪数组转化成真数组
      Array.prototype.slice.call(allList).forEach(li => {
        top += li.clientHeight // 获取所有li的每一个高度
        itemArray.push(top)
      })
      this.rightLiTops = itemArray
      this.rightLiTops.forEach((item, index) => {
        if (item < this.scrollY) {
          // 当为鼠标滚动时重新赋值
          if (this.scorllEvent) {
            this.index = index
          }
        }
      })
    },

    handleTagClose(tag) {
      const index = this.dynamicTagsID.indexOf(tag.id)
      this.dynamicTags.splice(index, 1)
      this.dynamicTagsID.splice(index, 1)
    },
    handleCheckboxChange(val) {
      if (val.rankType === '2') {
        return this.$message.warning('该人员为直接定等次人员，不能参与对比操作')
      }
      const index = this.dynamicTagsID.indexOf(val.id)
      if (index === -1) {
        if (this.dynamicTagsID.length === 2) {
          this.$message({
            message: '只能选择两个人员进行对比。',
            type: 'warning',
          })
          return
        }
        this.dynamicTags.push(val)
        this.dynamicTagsID.push(val.id)
      } else {
        this.dynamicTags.splice(index, 1)
        this.dynamicTagsID.splice(index, 1)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog {
  height: 75%;

  .el-dialog__body {
    height: calc(100% - 100px);
    padding: 10px 20px;
  }
}

.tips {
  margin-bottom: 10px;
  background-color: #fdf6ec;
  color: #e6a23c;
  padding: 6px 8px;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sys_emp_detail {
  height: calc(100% - 40px);
  overflow: hidden;

  .selcet_result {
    border: 1px dashed #dcdfe6;
    cursor: pointer;
    padding: 5px 10px;
    height: 40px;
    padding-bottom: 0;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tag_box {
      &:hover {
        border-color: #c0c4cc;
      }

      .el-tag {
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 0 8px;
      }
    }

    .input {
      flex: 1;

      /deep/.el-input__inner {
        border: 0;
        background-color: transparent;
      }
    }
  }

  .container_wrap {
    display: flex;
    height: calc(100% - 50px);

    .right_box {
      width: 200px;
      height: 100%;
      overflow-y: auto;
      background-color: #f6f6f6;

      .step_box {
        .current-back {
          background-color: #5497d6;
        }

        .text {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          font-size: 14px;
          color: #333333;
          cursor: pointer;

          &.current-text {
            color: #0080ff;
            background-color: #fff;
          }
        }
      }
    }

    .left_box {
      flex: 1;
      height: 100%;

      .content_big_right {
        height: 100%;
        overflow-x: hidden;
        padding: 0 10px;
      }

      .wrap {
        .item1 {
          .serve {
            .title2 {
              line-height: 46px;
              padding-left: 5px;
              font-size: 14px;
              color: #333;
              font-weight: 600;
            }

            .serve-wrap {
              display: flex;
              flex-wrap: wrap;
              padding: 10px;

              .serve-item {
                width: 80px;
                padding: 5px;
                margin: 0 5px 5px 0;
                text-align: center;
                cursor: pointer;

                &.active {
                  background-color: rgba($color: #ecf5ff, $alpha: 1);
                  border-radius: 4px;

                  .name {
                    color: #0080ff;
                  }
                }

                .head-icon {
                  width: 40px;
                  height: 40px;
                  margin: auto;
                  /deep/.user-icon {
                    width: 100%;
                    height: 100%;
                    img {
                      width: 100%;
                    }
                  }
                }

                .name {
                  line-height: 24px;
                  font-size: 14px;
                  color: #666;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
